<template>
	<view class="westlakePioneer">
		   <head-box></head-box>
		   <view class="content westlakePioneer-data tab-botton">
         <view class="activitySource-data">
           <view class="activitySource">
             <text class="activitySource-label">活动属性:</text>
             <u-radio-group v-model="activitySource">
               <u-radio shape="square" :name="0">全部</u-radio>
               <u-radio shape="square" :name="1">线上</u-radio>
               <u-radio shape="square" :name="2">线下</u-radio>
             </u-radio-group>
           </view>
           <view class="activitySource">
             <text class="activitySource-label">活动类型:</text>
             <u-radio-group v-model="activityType">
               <u-radio shape="square" :name="1">活动</u-radio>
               <u-radio shape="square" :name="2">服务</u-radio>
             </u-radio-group>
           </view>
         </view>
         <view  v-if="list.length">
           <block v-for="(item,b) in list" :key="b">
             <view class="item" @click="onGetThirdMoveUrlActivitySource(item)">
               <image
                   class="avat"
                   :src="item&&item.annexList.length ? $api.getImgUrl(item&&item.annexList[0].filePath) : '/static/img/null.png'"
                   mode="aspectFill"
               ></image>
               <view class="h1"> {{ item.activityName }} </view>
               <view class="h2">
                 <view class="a">
                   <image src="../../static/add/d.png"></image>
                   <text class="aa">{{ item.gmtCreate }}</text>
                 </view>

               </view>
               <view class="h3">
                 <image src="../../static/add/a.png"></image>
                 <text>{{ item.activityAddress }}</text>
               </view>
               <view class="h4">
                 <view class="l">
                   <view class="btn-1">
                     <text>{{item.activitySource==='1'?'线上':'线下'}}</text>
                   </view>
                   <view
                       class="btn-2"
                       :class="[item.runningState=== 0 ? 'status1' : item.runningState===1 ? 'status2':'status3']"
                   >
                     <text>{{item.runningState=== 0 ? '未开始' : item.runningState===1 ? '进行中':'已结束'}}</text>
                   </view>
                 </view>
                 <view class="r">
                   <view
                       class="views"
                       style="background-image: url(../../static/add/e.png)"
                   >
                     <text>查看详情</text>
                   </view>
                 </view>
               </view>
             </view>
           </block>
           <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
         </view>
         <u-empty
             margin-top="310"
             mode="list"
             v-if="!list.length && status === 'nomore'"
         ></u-empty>
       </view>
		      <tabs-box></tabs-box>
	</view>
</template>

<script>
import {qryLivingPointActivity,getThirdMoveUrlActivitySource} from '@/api/westlake'
import { encodeURIComponentUrl } from '@/common/base.js'
	export default {
		data() {
			return {
        activitySource:2,//活动属性0:全部 1:线上 2线下 不传默认线下
        activityType:1,//查询类型 1.活动 2.服务
        lat: 29.59, //默认北京定位 经度
        lng: 119.05, //维度
        current:1,//当前页
        placeId:'',//党群服务中心id
        size:10,//页尺寸
        list:[],//数据
        status: 'loadmore', //加载的状态
        iconType: 'flower', //加载图标样式
        isLoading: false, //是否要加载数据
			};
		},
    onLoad(){

    },
    watch:{
      //查询类型  监听单选是否被重复点击操作
      activityType(a,b){
        if(a!==b){
          this.activityType=a
          this.typeSource()
        }

      },
      //活动属性 监听单选是否被重复点击操作
      activitySource(a,b){
        if(a!==b){
          this.activitySource=a
          this.typeSource()
        }

      }
    },
    mounted() {
      this.lng= uni.getStorageSync('lng');
      this.lat= uni.getStorageSync('lat');
      this.qryLivingPointActivity()
    },
    methods:{
		  typeSource(){
        this.onRest()
        this.qryLivingPointActivity()
      },
      //获取指定活动的免登接口-外部活动（西湖先锋活动专用）
      async onGetThirdMoveUrlActivitySource({activitySource,id,activityName}){
		    this.$api.showLoading({title:'加载中...'})
        const { code, message,success,result }= await getThirdMoveUrlActivitySource({sceneId:'1415859743536218113',id,activitySource,token:uni.getStorageSync('token')})
        if (code === 500) {
          this.$api.msg(message)
          return
        }
        if (success) {
          this.$api.hideLoading()
          return encodeURIComponentUrl(result,activityName)
        }
      },
		  onRest(){
		    this.list = []
        this.current = 1
        this.status='loadmore'
        this.isLoading=false
      },
      loadmore(){
        this.current++
        this.qryLivingPointActivity()
      },
      async qryLivingPointActivity(){
        if (this.isLoading) {
          return
        }
        this.isLoading = true
        this.status = 'loading'
        uni.showLoading({
          title: '列表加载中...',
        })
        const data ={
          activitySource:this.activitySource,//活动属性0:全部 1:线上 2线下 不传默认线下
          activityType:this.activityType,
          lat: this.lat, //默认北京定位 经度
          lng: this.lng, //维度
          current:this.current,//当前页
          placeId:this.placeId,//党群服务中心id
        }
        const {
          code,
          result: { records: list, total },
        }  = await qryLivingPointActivity(data)
        if (code === 0) {
          this.isLoading = false
          uni.hideLoading()
          if (!list.length) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
            this.list = [...this.list, ...list]
            if (this.list.length >= total) {
              this.status = 'nomore'
            }
          }
        } else {
          this.status = 'nomore'
          uni.hideLoading()
        }
      }
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    //加载到底部进行请求新的数据
    onReachBottom() {
      if (this.status === 'loadmore') {
        this.loadmore()
      }
    },
	}
</script>

<style lang="scss" scoped>
.westlakePioneer{
  .westlakePioneer-data{
    padding: 40rpx;
    .activitySource{
      .activitySource-label{
        padding-right: 20rpx;
      }
    }
  }
}
.activitySource-data{
  padding-bottom: 20rpx;
}
.content {
  padding-top: 24rpx;
  .item {
    padding: 0 20rpx 46rpx 20rpx;
    .avat {
      height: 298rpx;
      width: 710rpx;
      border-radius: 15upx;
    }
    .h1 {
      font-size: 30rpx;
      font-family: PingFang;
      font-weight: 500;
      color: #222222;
      line-height: 44rpx;
      padding: 32rpx 0 18rpx 23rpx;
    }
    .h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 23rpx;
      .a {
        &:first-child {
          font-size: 18rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #666666;
          line-height: 44rpx;
        }
        &:last-child {
          display: flex;
          align-items: center;
        }
        .aa {
          padding-left: 21rpx;
          font-size: 26rpx;
        }

        image {
          width: 20rpx;
          height: 24rpx;
        }
        .a1 {
          padding-left: 12rpx;
          white-space: nowrap;
          font-size: 20rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #3389ed;
          line-height: 44rpx;
          text {
            width: 39upx;
            height: 19upx;
            font-size: 20upx;
            font-family: PingFang;
            font-weight: 400;
            color: #3389ed;
            line-height: 44upx;
          }
        }
      }
    }
    .h3 {
      padding: 13rpx 0 0 23rpx;
      image {
        width: 20rpx;
        height: 24rpx;
      }
      text {
        width: 395rpx;
        height: 18rpx;
        font-size: 26rpx;
        font-family: PingFang;
        font-weight: 400;
        color: #666666;
        line-height: 44rpx;
        padding-left: 21rpx;
      }
    }
    .h4 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 23rpx;
      padding-top: 10rpx;
      .l {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .btn-1 {
          width: auto;
          border: 1rpx solid #3389ed;
          border-radius: 14rpx;
          line-height: 18rpx;
          padding: 8rpx;
          text {
            text-align: center;
            width: 100%;
            display: block;
            font-size: 24rpx;
            font-family: PingFang;
            font-weight: 400;
            color: #3389ed;
          }
        }
        .status1,.status2,.status3,.status4,.status5 {
          width:auto;
          border-radius: 14rpx;
          margin-left: 50rpx;
          line-height: 18rpx;
          padding: 8rpx;
          text {
            text-align: center;
            width: 100%;
            display: block;
            font-size: 18rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #ffffff;
          }
        }
      }
      .r {
        width:auto;
        text-align: center;
        .views {
          width: 100%;
          height: 47rpx;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          text {
            width: 71rpx;
            height: 17rpx;
            font-size: 28rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #fefefe;
            line-height: 29rpx;
            padding: 13rpx 22rpx 17rpx 20rpx;
          }
        }
      }
    }
  }
}
.status1{
  background: $status3f8fee;
  border: transparent;
}
.status2{
  background: $statusffa800;
  border: 1px solid $statusffa800;
}
.status3{
  background: $statusecff700;
  border: transparent;
}
</style>
